<template>
    <div class="form-group">
    <label for="exampleFormControlFile1">给视频添加标题</label>
    <input  placeholder="必须填写" type="text" v-model="Title" class="form-control" >
    <br>
    <label for="exampleFormControlFile1">给视频添加描述</label>
    <input  v-model="Description" type="text" class="form-control" >
    <br>
    <label for="exampleFormControlFile1">给视频添加标签</label>
    <el-tooltip class="item" effect="dark" content="多个标签用英文逗号分开" placement="top">
    <input  v-model="Tags" type="text" class="form-control" >
        </el-tooltip>
    <br>
    <label for="exampleFormControlFile1">选择视频</label>
    
    <input  type="file" class="form-control-file" accept=".3GP,.ASF,.AVI,.DAT,.DV,.FLV,.F4V,.GIF,.M2T,.M4V,.MJ2,.MJPEG,.MKV,.MOV,.MP4,.MPE,.MPG,.MPEG,.MTS,.OGG,.QT,.RM,.RMVB,.SWF,.TS,.VOB,.WMV,.WEBM" id="exampleFormControlFile1">

    <button type="button" @click="uploads()"  >上传</button>
    <br>
    <el-progress :text-inside="true" :stroke-width="18" :percentage="exc"></el-progress>
  </div>
</template>

<script>
const AliyunUpload = window.AliyunUpload;
import { asyncuploadAccess } from "../plugins/api.js";

export default {
  name: "update",
  data() {
    return {
      exc: 0,
      Tags: "",
      Description: "",
      Title: ""
    };
  },

  methods: {
    async uploads() {
      let userData = {
        Vod: {
          StorageLocation: "",
          Title: this.Title,
          Description: this.Description,
          CateId: "19",
          Tags: this.Tags
        }
      };

      let files1 = document.getElementById("exampleFormControlFile1").files[0];
      let updatedvideoId = this.$attrs.updatedvideoId;
      if (!this.Title) {
        return;
      }
      if (!files1) {
        return;
      }

      var uploader = new AliyunUpload.Vod({
        onUploadstarted: async function(uploadInfo) {
          let {
            accessKeyId,
            accessKeySecret,
            securityToken
          } = await asyncuploadAccess();
          uploader.setSTSToken(
            uploadInfo,
            accessKeyId,
            accessKeySecret,
            securityToken
          );
        },
        onUploadSucceed: uploadInfo => {
          updatedvideoId(uploadInfo.videoId);
        },
        onUploadProgress: (uploadInfo, totalSize, loadedPercent) => {
          this.exc = Number((loadedPercent * 100.0).toFixed(2));
        },
        onUploadEnd: () => {
          this.$message({
            message: "恭喜你，上传成功",
            type: "success"
          });
        }
      });
      userData = JSON.stringify(userData);
      uploader.addFile(files1, null, null, null, userData);
      uploader.startUpload();
    }
  }
};
</script>

<style scoped>
</style>
